<template>
	<div class="bottom-nav-config">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right">
					<template v-for="(btn, index) in buttonList">
						<el-button v-if="btn.perms === 'A'" :key="index + new Date()" type="primary" size="mini" @click="addData">
							<template v-for="title in btn.title">
								<span v-if="languageId === title.langId">{{ title.name }}</span>
							</template>
						</el-button>
						<el-button v-if="btn.perms === 'D'" :key="index + new Date()" type="danger" size="mini" @click="deleteData">
							<template v-for="(title, index_1) in btn.title">
								<span v-if="languageId === title.langId">{{ title.name }}</span>
							</template>
						</el-button>
					</template>
				</div>
			</div>
			<div class="main_content_con">
				<el-table ref="qtable" v-loading="tableLoading || tableConfigLoading" :data="tableList" tooltip-effect="dark"
					row-key="id" :tree-props="{ children: 'children' }" :default-expand-all="false" :select-on-indeterminate="true"
					:border="true" height="100%" @row-click="tableCurrentChange" @selection-change="tableSelectionChange"
					@header-dragend="tableHeaderDragend">
					<!-- <el-table-column key="index" type="index" :resizable="false" width="50" fixed="left" align="center" /> -->
					<el-table-column key="selection" type="selection" :resizable="false" width="50" fixed="left" align="center" />
					<template v-for="(item, headerIndex) in tableConfig">
						<el-table-column v-if="item.show" :key="item.key" :column-key="item.key" :min-width="item.width"
							:show-overflow-tooltip="true" :resizable="item.resizable" :fixed="item.fixed" align="center">
							<template slot="header" slot-scope="scope">
								<div class="header_item" v-if="!item.keySort" style="cursor: default;">
									{{ item.label }}
								</div>
								<div class="header_item" v-if="item.keySort"
									@click.stop="getkeySort(item.key, item.keySort, field !== item.keySort ? 0 : order === 0 && keySortFlag ? 1 : order === 1 && keySortFlag ? -1 : 0)">
									{{ item.label }}
									<div class="keySort">
										<i class="el-icon-caret-top" :style="{ color: keySortValue == item.key ? topIconColor : '#c0c4cc' }"
											@click.stop="getkeySort(item.key, item.keySort, 0)" />
										<i class="el-icon-caret-bottom"
											:style="{ color: keySortValue == item.key ? bottomIconColor : '#c0c4cc' }"
											@click.stop="getkeySort(item.key, item.keySort, 1)" />
									</div>
								</div>
								<div v-if="showSearch" class="search_box">
									<div v-if="item.searchEnable">
										<div v-if="item.searchType === 'select'" class="select_box"
											:class="[item.key ? 'input_key_' + item.key : '']">
											<el-select v-model="item.value" :placeholder="$t('placeholderTip.pSelect')" size="mini" clearable
												filterable @change="getList">
												<el-option v-for="(option, optionIndex) in item.options"
													:key="item.key + '_select_' + optionIndex" :label="option.label" :value="option.value" />
											</el-select>
										</div>
										<div v-else-if="item.searchType === 'timeRange'" class="time_range_box">
											<el-date-picker v-model="item.value" type="daterange" align="right" size="mini" unlink-panels
												:range-separator="$t('text.to')" :start-placeholder="$t('el.datepicker.startTime')"
												:end-placeholder="$t('el.datepicker.endTime')" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
												@change="getList" />
										</div>
										<div v-else class="input_box">
											<el-input v-model="item.value" size="mini" clearable :placeholder="$t('placeholderTip.enter')"
												:tabindex="headerIndex + 1 + ''" @keyup.enter.native="getList" @clear="getList" />
										</div>
									</div>
								</div>
							</template>
							<template slot-scope="scope">
								<div v-if="item.isImg === true">
									<div class="headImg">
										<upload-img style="width: 32px; height:32px;" v-if="scope.row[item.key]" :preview="true"
											:defsrc="scope.row[item.key]" disabled />
										<div slot="error" class="image-slot" v-else>
											<i class="el-icon-picture-outline" style="font-size: 30px;color:#cdcdcd;" />
										</div>
									</div>
								</div>
								<span v-else-if="item.key === 'isHome'"
									:class="[scope.row[item.key] === 1 ? 'validColor' : 'invalidColor']">{{ scope.row[item.key] === 1 ?
										$t('publicBtn.yes')
										: $t('publicBtn.no') }}</span>
								<span v-else-if="item.key === 'status'"
									:class="[scope.row[item.key] === 1 ? 'validColor' : 'invalidColor']">{{ scope.row[item.key] === 1 ?
										$t('publicBtn.enable')
										: $t('publicBtn.disable') }}</span>
								<span v-else>{{ scope.row[item.key] || '-' }}</span>
							</template>
						</el-table-column>
					</template>
					<el-table-column key="setting" width="90" :resizable="false" fixed="right" align="center">
						<template slot="header">
							<div style="display: flex;align-items: center;justify-content: center;">
								<el-button type="text" @click.stop="openSearchView">
									<svg-icon icon-class="filter" />
								</el-button>
								<span style="display: inline-block;width: 1px;height: 20px;background-color: #c2c2c2;margin: 0 10px;" />
								<el-button type="text" class="el-icon-setting" @click.stop="showTableConfigDialog = true" />
							</div>
							<div v-if="showSearch" class="search_box">
								<el-button type="text" icon="el-icon-search" style="width: 50%" circle @click.stop="getList()" />
								<el-button type="text" icon="el-icon-circle-close" style="width: 50%; margin-left: unset" circle
									@click.stop="cleanSearch" />
							</div>
						</template>
						<template slot-scope="scope">
							<div @click.stop>
								<el-dropdown trigger="click" @command="handleCommand($event, scope.row)">
									<span class="el-dropdown-link">
										<img src="@/assets/images/menu_more.svg">
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="detail">{{ $t('publicBtn.detail') }}</el-dropdown-item>
										<template v-for="(btn, index) in buttonList">
											<span :key="index + new Date()">
												<el-dropdown-item v-if="btn.perms === 'U'" command="edit">
													<template v-for="title in btn.title">
														<span v-if="languageId === title.langId">{{ title.name }}</span>
													</template>
												</el-dropdown-item>
												<!-- 禁用 启用 -->
												<el-dropdown-item v-if="btn.perms === 'U'" command="status">{{ scope.row.status === 1 ?
													$t('publicBtn.disable') : $t('publicBtn.enable')
												}}</el-dropdown-item>
												<el-dropdown-item v-if="btn.perms === 'U' && scope.row.isHome != 1" command="setHome">{{
													$t('text.setHome') }}</el-dropdown-item>
												<el-dropdown-item v-if="btn.perms === 'D'" command="delete">
													<template v-for="title in btn.title">
														<span v-if="languageId === title.langId">{{ title.name }}</span>
													</template>
												</el-dropdown-item>
											</span>
										</template>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagination_box">
				<el-pagination :current-page="pagination.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="pagination.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>
		<!-- 设置表头 -->
		<table-config-dialog :visible="showTableConfigDialog" :table-config="tableConfig" @change="tableConfigChange"
			@close="closeTableConfigDialog" />
		<!-- 添加国家 -->
		<el-dialog
			:title="propUpType === 'add' ? $t('text.addNav') : propUpType === 'edit' ? $t('text.editNav') : $t('text.detail')"
			width="50%" :visible.sync="addDialogVisible" append-to-body custom-class="add_dialog">
			<!-- 语言动态标签页面 -->
			<elTabPane :isShow="isTag" :tagId="tagId" @tagClick="tagClick"></elTabPane>
			<el-form ref="info" :model="info" :rules="rules" class="demo-ruleForm">
				<el-form v-for="(info, index) in info.list" :ref="`info${index}`" label-width="100px" :model="info" :rules="rules"
					v-show="tagId === info.langId" :key="index" class=" demo-ruleForm">
					<template v-if="propUpType != 'detail'">
						<el-form-item :label="$t('formLabel.role')" prop="roleId">
							<el-select :disabled="propUpType === 'edit' ? true : false" v-model="info.roleId"
								:placeholder="$t('placeholderTip.pSelect')" style="width:99%" type="number"
								@change="copyValue('list', 'roleId', info.roleId)">
								<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
							<span style="color:#999;font-weight: 400;">
								<i class="el-icon-warning-outline"></i> {{ $t('text.roleNavTip') }}
							</span>
						</el-form-item>
						<el-form-item :label="$t('formLabel.navigationName')" prop="name">
							<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
							<span style="color:#999;font-weight: 400;">
								<i class="el-icon-warning-outline"></i> {{ $t('text.navMaxTip') }}
							</span>
						</el-form-item>
						<el-form-item :label="$t('formLabel.selectIcon')" prop="chooseImg">
							<div class="avatar-uploader">
								<upload-img ref="UploadImgSimple" customsrc="true" :defsrc="info.chooseImg"
									:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'chooseImg') }">
									<i class="el-icon-plus avatar-uploader-icon" />
								</upload-img>
							</div>
							<div class="tipInfo">（{{ $t('text.size') }}:50px*50px）</div>
							<div v-if="info.chooseImg" class="deleteImg" @click.stop="deleteImg(info, 'chooseImg')">
								<img src="@/assets/images/close.png">
							</div>
						</el-form-item>
						<el-form-item :label="$t('formLabel.unselectedIcon')" prop="noChooseImg">
							<div class="avatar-uploader">
								<upload-img ref="UploadImgSimple" customsrc="true" :defsrc="info.noChooseImg"
									:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'noChooseImg') }">
									<i class="el-icon-plus avatar-uploader-icon" />
								</upload-img>
							</div>
							<div class="tipInfo">（{{ $t('text.size') }}:50px*50px）</div>
							<div v-if="info.noChooseImg" class="deleteImg" @click.stop="deleteImg(info, 'noChooseImg')">
								<img src="@/assets/images/close.png">
							</div>
						</el-form-item>
						<el-form-item :label="$t('publicFormLabel.sort')" prop="sort">
							<el-input v-model="info.sort" type="number" @mousewheel.native.prevent @keydown.native.up.prevent
								@keydown.native.down.prevent @keydown.native.tab.prevent @change="copyValue('list', 'sort', info.sort)"
								:placeholder="$t('placeholderTip.enter')" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.androidUrl')" prop="androidUrl">
							<el-input ype="url" v-model="info.androidUrl" @change="copyValue('list', 'androidUrl', info.androidUrl)"
								:placeholder="$t('placeholderTip.enter')" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.iosUrl')" prop="iosUrl">
							<el-input type="url" v-model="info.iosUrl" @change="copyValue('list', 'iosUrl', info.iosUrl)"
								:placeholder="$t('placeholderTip.enter')" />
						</el-form-item>
						<el-form-item :label="$t('publicFormLabel.remark')" prop="remark">
							<el-input v-model="info.remark" type="textarea" @change="copyValue('list', 'remark', info.remark)"
								:placeholder="$t('placeholderTip.enter')" />
						</el-form-item>
					</template>
					<template v-else>
						<el-form-item :label="$t('formLabel.role')" prop="roleId">
							<el-input readonly :value="info.roleName" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.navigationName')" prop="name">
							<el-input readonly :value="info.name" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.selectIcon')" prop="chooseImg">
							<div class="avatar-uploader">
								<upload-img :preview="true" :defsrc="info.chooseImg" disabled />
							</div>
						</el-form-item>
						<el-form-item :label="$t('formLabel.unselectedIcon')" prop="noChooseImg">
							<div class="avatar-uploader">
								<upload-img :preview="true" :defsrc="info.noChooseImg" disabled />
							</div>
						</el-form-item>
						<el-form-item :label="$t('publicFormLabel.sort')" prop="sort">
							<el-input readonly :value="info.sort" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.androidUrl')" prop="androidUrl">
							<el-input readonly :value="info.androidUrl" />
						</el-form-item>
						<el-form-item :label="$t('formLabel.iosUrl')" prop="iosUrl">
							<el-input readonly :value="info.iosUrl" />
						</el-form-item>
						<el-form-item :label="$t('publicFormLabel.remark')" prop="remark">
							<el-input :value="info.remark" type="textarea" />
						</el-form-item>
					</template>
				</el-form>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">{{ propUpType === 'detail' ? $t('el.popconfirm.close') :
					$t('el.popconfirm.cancelButtonText') }}</el-button>
				<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
					v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import {
	getNavigationInfo,
	getNavigationList,
	setNavigationSave,
	setNavigationUpdate,
	setNavigationDelete,
	setNavigationEnable,
	setNavigationDisable,
	setNavigationSetHome,
} from '@/api/app-set'
import {
	getRoleDefaultList,
} from '@/api/system-manager'
import elTabPane from '@/components/el-tab-pane/index'; //语言动态标签页面
import { getTableHeaderList } from '@/api/table-config'
import UploadImgSimple from '@/components/Upload/UploadImgSimple'

import tableConfigDialog from '@/components/table-config-dialog'
export default {
	name: 'BottomNavConfig',
	components: {
		UploadImg: UploadImgSimple,
		tableConfigDialog,
		elTabPane
	},
	data() {
		return {
			pagination: {
				page: 1,
				limit: 20,
				total: 0
			},
			roles: this.$store.getters.staffCode, //PINGTAI admin权限
			tagId: '',//语言id 默认id 
			isTag: false,
			flag: false,
			tableSelectedList: [],
			showTableConfigDialog: false,
			refreshDelay: 200,
			tableLoading: false,
			showSearch: false,
			tableConfigLoading: false,
			tableConfig: [],
			keySortValue: '',
			topIconColor: '',
			bottomIconColor: '',
			tableList: [],
			field: '', // 排序字段
			keySortFlag: true,
			order: '', // 类型  0:正序 1:倒序
			buttonList: [], // 按钮
			propUpType: '', // 弹出状态  add  edit detail
			addDialogVisible: false,
			info: {
				list: []
			},
			roleList: [],//角色列表
			fullscreenLoading: false,
			rules: {
				roleId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				chooseImg: [
					{
						required: true,
						message: this.$t('placeholderTip.pUpload'),
						trigger: 'blur'
					}
				],
				noChooseImg: [
					{
						required: true,
						message: this.$t('placeholderTip.pUpload'),
						trigger: 'blur'
					}
				],
				sort: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
				],
				androidUrl: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{
						required: true,
						pattern: /^[^\u4e00-\u9fa5]+$/,
						message: this.$t('placeholderTip.isLink'),
						trigger: 'blur'
					}
				],
				iosUrl: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{
						required: true,
						pattern: /^[^\u4e00-\u9fa5]+$/,
						message: this.$t('placeholderTip.isLink'),
						trigger: 'blur'
					}
				],
				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
			},
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	watch: {
		tableConfig: {
			handler(val) {
				this.pagination.page = 1
			},
			deep: true
		},
	},
	mounted() {
		window._vm = this
		this.buttonList = this.$route.meta.buttonList
		this.bindEvent()
		this.initTableHeader()
	},
	created() { },
	activated() { },
	destroyed() {
		this.removeEvent()
	},
	methods: {
		// 无多语言字段处理
		copyValue(key, key2, value) {
			var roleCode = ''
			if (key2 === 'roleId') {
				this.roleList.map((i) => {
					if (value === i.id) {
						roleCode = i.code
					}
				})
			}
			this.info[key].map(i => {
				if (key2 === 'roleId') {
					i.roleCode = roleCode
				}
				i[key2] = value
			})
		},


		// 排序功能
		getkeySort(key, keySort, order) {
			var obj = {
				key: key, //当前key 值
				keySort: keySort, //筛选key值
				order: order, //当前类型 0:正序 1:倒序
				this_keySortValue: this.keySortValue, //当前的筛选key值
				this_topIconColor: this.topIconColor, //定义 正序值
				this_bottomIconColor: this.bottomIconColor, // 倒序值
				this_order: this.order, //定义的类型 0:正序 1:倒序
				this_keySortFlag: this.keySortFlag //data定义 的 keySortFlag
			}
			let data = this.SortData(obj) //调起方法并传值   data 方法返回的值
			if (data) {
				this.keySortValue = data.keySortValue
				this.topIconColor = data.topIconColor
				this.bottomIconColor = data.bottomIconColor
				this.order = data.order
				this.keySortFlag = data.keySortFlag
				this.field = data.field
				this.getList()
			}
		},
		removeEvent() {
			window.removeEventListener('resize', this.refresh)
		},
		bindEvent() {
			window.addEventListener('resize', this.refresh)
		},
		tableSelectionChange(selection) {
			this.tableSelectedList = selection
		},
		// 关闭弹框
		closeTableConfigDialog() {
			this.showTableConfigDialog = false
		},
		tableHeaderDragend(newWidth, oldWidth, column, event) {
			var tar = this.tableConfig.find(item => item.key === column.columnKey)
			this.$nextTick(() => {
				if (tar) {
					if (newWidth < 130) {
						column.width = 130
						tar.width = 130
					} else {
						tar.width = newWidth
					}
				}
			})
		},
		tableCurrentChange(row) {
			// console.log(row, 'row');
			this.$refs['qtable'].toggleRowSelection(row)
		},
		cleanSearch() {
			var tag = false
			this.tableConfig.forEach(item => {
				if (item.searchEnable) {
					if (typeof item.value !== 'undefined') {
						if (item.value !== '') {
							item.value = ''
							tag = true
						}
					}
				}
			})
			tag && this.getList()
		},
		openSearchView() {
			this.showSearch = !this.showSearch
			setTimeout(() => {
				this.refresh()
			}, 200)
		},

		refresh() {
			try {
				setTimeout(() => {
					if (this.$refs['qtable']) {
						this.$refs.qtable.doLayout()
						this.$refs.qtable.bodyWrapper.scrollTop = 0
					}
				}, this.refreshDelay)
			} catch (error) {
				//
			}
		},
		// 表头
		tableConfigChange(tableConfig) {
			if (tableConfig) {
				this.tableConfig = tableConfig
			} else {
				this.initTableHeader()
			}
		},

		// 表头接口
		initTableHeader() {
			var menuId = this.$route.meta.id
			getTableHeaderList(menuId).then(res => {
				if (res.code === 200) {
					this.tableConfig = this.checkTableHeader(JSON.parse(res.data))
					this.getList()
				}
			})
		},
		checkTableHeader(list) {
			list.forEach(item => {
				if (item.searchEnable) {
					if (item.searchType === 'select') {
						if (
							Object.prototype.toString.call(item.options) === '[object Array]'
						) {
							if (item.options.length) {
								item.optionsForAdd = JSON.parse(JSON.stringify(item.options))
							}
						}
					}
					if (typeof item.value === 'undefined') {
						this.$set(item, 'value', '')
					}
				}
			})
			return list
		},

		// 角色默认权限
		getRoleDefaultListData() {
			getRoleDefaultList(1).then(res => {
				if (res.code === 200) {
					this.roleList = res.data
				}
			})
		},

		// 列表接口
		getList() {
			this.tableLoading = true
			var params = {
				page: this.pagination.page,
				limit: this.pagination.limit,
				field: this.field,
				order: this.order
			}
			this.tableConfig.forEach(item => {
				if (item.searchEnable && item.value) {
					console.log('key : ' + item.key + '\n' + 'value : ' + item.value)
					if (item.searchType === 'timeRange') {
						params[item.searchField || item.key] = item.value.join(',')
					} else {
						params[item.searchField || item.key] = item.value
					}
				}
			})
			var searchObj = ''
			// // 筛选条件取值
			if (Object.keys(params).length > 0) {
				Object.keys(params).forEach(function (key, index) {
					if (index === 0) {
						// 第一个 不需要  '&'
						searchObj = searchObj.concat(`${key}=${params[key]}`)
					} else {
						searchObj = searchObj.concat('&' + `${key}=${params[key]}`)
					}
				})
			}
			getNavigationList(searchObj)
				.then(res => {
					if (res.code === 200) {
						this.tableList = res.data.list
						this.pagination.limit = res.data.pageSize
						this.pagination.total = res.data.totalCount
						this.refresh()
					}
				})
				.finally(() => {
					this.tableLoading = false
				})
		},
		// 添加
		addData() {
			this.info = { list: [] }
			this.resetForm('info', 1) //重置表单
			this.$nextTick(() => {
				this.info.list = this.setFormData()
			})
			this.getRoleDefaultListData()
			this.propUpType = 'add'
			this.addDialogVisible = true
			this.tagId = this.languageId
			this.isTag = true
		},

		// 多表单处理
		setFormData() {
			var arr = []
			this.languageList.map(i => {
				var obj = {
					langId: i.id,
					name: '', //名称 - 多语言
					roleId: '', //角色id
					roleCode: '',//角色编码
					androidUrl: '', //安卓链接
					iosUrl: '', //苹果链接
					noChooseImg: '', //未选中图标
					chooseImg: '', //选中图标
					sort: '', //排序
					remark: '', //备注
					status: 1 // 状态 -1:删除 0:冻结 1:启用
				}
				arr.push(obj)
			})
			return arr
		},
		// 语言菜单处理
		tagClick(id) {
			if (id !== this.tagId) {
				this.resetForm('info', 2)
				this.tagId = id
			}
		},
		// 重置表单
		resetForm(vaid, type) {
			// type 1 重置表单 2仅清空校验
			if (this.$refs[vaid] !== undefined) {
				this.$nextTick(() => {
					Promise.all([
						//数组部分的表单，用map返回验证函数的调用
						...this.info.list.map((item, index) => {
							var refs = `info${index}`
							let valiForm = this.$refs?.[refs].validate
								? this.$refs?.[refs]
								: this.$refs?.[refs][0];
							if (type === 1) {
								valiForm.resetFields()
							} else {
								valiForm.clearValidate()
							}
						})
					])
				})

			}
		},

		// 删除图片
		deleteImg(tar, key) {
			this.info.list.map(i => {
				i[key] = ''
			})
		},
		// 上传图片
		handleAvatarSuccess(res, file, tar, key) {
			if (res) {
				this.info.list.map(i => {
					i[key] = res.key
				})
			}
		},

		// 提交
		addSubmitForm() {
			var list = JSON.parse(JSON.stringify(this.info.list))
			var flag = false
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				var index = i
				// 当前语种 表单校验every
				if (this.tagId === item.langId) {
					let valiForm = this.$refs?.[`info${index}`].validate
						? this.$refs?.[`info${index}`]
						: this.$refs?.[`info${index}`][0];
					valiForm.validate((res) => {
						if (res) {
							flag = true // 一个多语言字段 直接校验当前表单 
							// flag = this.getCheck(index) //多个对语言 需要校验其他语种表单
						} else {
							return false
						}
					})
				}
			}
			if (flag) {
				// 全部表单验证通过
				var arr = JSON.parse(JSON.stringify(this.info.list))
				this.fullscreenLoading = true
				if (this.propUpType === 'add') {
					setNavigationSave({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.addSucceedTip'),
									type: 'success'
								})
								this.addDialogVisible = false
								this.fullscreenLoading = false
								this.getList()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
						})

				} else {
					setNavigationUpdate({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.editSucceedTip'),
									type: 'success'
								})
								this.addDialogVisible = false
								this.fullscreenLoading = false
								this.getList()
							}
						})
						.finally(() => {
							this.fullscreenLoading = false
						})
				}
			}
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getNavigationInfo(id).then(res => {
				if (res.code === 200) {
					var arr = res.data.t || []
					if (arr.length > 0) {
						this.setInfoData(arr)
					}
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},
		// 详情数据处理
		setInfoData(data) {
			this.$nextTick(() => {
				var newArr = []
				var arr = data
				var newObj = arr[0]
				if (this.propUpType !== 'detail') {
					this.languageList.map(i => {
						var obj = {
							langId: i.id,
							id: newObj.id,
							name: '', // 部门名称 -多语言
							roleId: newObj.roleId, //角色id
							roleCode: newObj.roleCode,//角色编码
							androidUrl: newObj.androidUrl, //安卓链接
							iosUrl: newObj.iosUrl, //苹果链接
							noChooseImg: newObj.noChooseImg, //未选中图标
							chooseImg: newObj.chooseImg, //选中图标
							sort: newObj.sort, //排序
							remark: newObj.remark, //备注
							status: newObj.status // 状态 -1:删除 0:冻结 1:启用
						}
						newArr.push(obj)
					})
				} else {
					this.languageList.map(i => {
						var obj = {
							langId: i.id,
							id: '',
							name: '', //名称 - 多语言
							roleId: '', //角色id
							roleCode: '',//角色编码
							roleName: '',
							androidUrl: '', //安卓链接
							iosUrl: '', //苹果链接
							noChooseImg: '', //未选中图标
							chooseImg: '', //选中图标
							sort: '', //排序
							remark: '', //备注
							status: 1 // 状态 -1:删除 0:冻结 1:启用
						}
						newArr.push(obj)
					})
				}
				arr.map(j => {
					// 根据id进行对象替换
					let index = newArr.findIndex(e =>
						e.langId == j.langId
					)
					if (index > -1) {
						// 替换对象
						newArr[index] = j
					}
				})
				this.info.list = newArr
			})
		},

		// 操作功能
		handleCommand(val, tar) {
			switch (val) {
				case 'edit':
					this.info = { list: [] }
					this.tagId = this.languageId
					this.resetForm('info', 1)
					this.propUpType = 'edit'
					this.getRoleDefaultListData()
					this.$nextTick(() => {
						this.getInfo(tar.id)
					})
					this.addDialogVisible = true
					this.isTag = true
					break
				case 'status':
					var status = tar.status
					var statusApi = ''
					if (status === 0) {
						statusApi = setNavigationEnable
					} else {
						statusApi = setNavigationDisable
					}
					statusApi(tar.id).then(res => {
						if (res.code === 200) {
							this.$message({
								message: this.$t('text.operationSucceedTip'),
								type: 'success'
							})
							this.getList()
						}
					})
					break
				case 'setHome':
					setNavigationSetHome({
						id: tar.id,
						roleId: tar.roleId
					}).then(res => {
						if (res.code === 200) {
							this.$message({
								message: this.$t('text.operationSucceedTip'),
								type: 'success'
							})
							this.getList()
						}
					})
					break
				case 'detail':
					this.info = { list: [] }
					this.tagId = this.languageId
					this.resetForm('info', 1)
					this.propUpType = 'detail'
					this.$nextTick(() => {
						this.getInfo(tar.id)
					})
					this.addDialogVisible = true
					this.isTag = true
					break
				case 'delete':
					this.getDeleteData(tar.id)
					break
				default:
					break
			}
			return false
		},
		// 删除功能  多选
		deleteData() {
			var list = this.tableSelectedList
			if (list.length < 1) {
				this.$message({
					message: this.$t('text.pSelLeastOneList'),
					type: 'warning'
				})
			} else {
				var newIds = []
				list.filter(item => {
					newIds.push(item.id)
				})
				var ids = newIds.toString()
				this.getDeleteData(ids)
			}
		},
		// 删除接口
		getDeleteData(ids) {
			this.$confirm(this.$t('delConfirm.isDelete'), this.$t('delConfirm.tip'), {
				confirmButtonText: this.$t('delConfirm.confirmButtonText'),
				cancelButtonText: this.$t('delConfirm.cancelButtonText'),
				type: 'warning'
			}).then(() => {
				setNavigationDelete(ids).then(res => {
					if (res.code === 200) {
						this.$message({
							message: this.$t('text.delSucceedTip'),
							type: 'success'
						})
						this.getList()
					}
				})
			})
				.catch(() => { })
		},
		// 分页
		handleSizeChange(val) {
			this.pagination.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.pagination.page = val
			this.getList()
		}
	}
}
</script>
<style lang="scss" scoped>
.bottom-nav-config {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 70px);
			width: 100%;
			display: inline-block;

			.el-table {
				::v-deep .el-icon-arrow-right {
					font-weight: 600;
				}

				::v-deep th {
					padding: unset;
					background-color: #f2f2f2;

					.header_item {
						height: 39px;

						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						&>.keySort {
							width: 23px;
							height: 21px;
							position: relative;
							display: inline-block;

							&>.el-icon-caret-top {
								position: absolute;
								top: 0;
								right: 0;
								left: 0;
								margin: auto;
								cursor: pointer;
							}

							&>.el-icon-caret-bottom {
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								margin: auto;
								cursor: pointer;
							}
						}
					}
				}

				.colorContnet {
					padding: 12px 10px;
					box-sizing: border-box;
					border-radius: 10px;
					color: #fff;
					font-size: 12px;
				}


				::v-deep td {
					text-align: center;

					.headImg {
						display: flex;
						justify-content: center;
						line-height: 0px;

						.el-image {
							max-width: 40px;
							max-height: 40px;
							margin: 0 auto;

							&>img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}


				.el-dropdown {
					cursor: pointer;
				}
			}
		}
	}
}
</style>
<style lang="scss" scoped>
::v-deep .add_dialog {
	height: calc(100% - 30vh) !important;
	position: relative;

	.el-dialog__header {
		border-bottom: 1px solid #e4e4e4;
		text-align: left;
	}

	.el-dialog__body {
		height: calc(100% - 125px);

		.el-form {
			margin-top: 15px;
			height: calc(100% - 30px);
			overflow: auto;
		}
	}

	.el-dialog__footer {
		border-top: 1px solid #e4e4e4;
		text-align: right;
	}

	.el-button:hover,
	.el-button:focus {
		color: #000;
	}
}
</style>

